<template>
  <div class="asideContianer">

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <h3>{{ isCollapse ? 'crm' : 'CRM系统' }}</h3>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title" @click="clickMenu('/cust')">客户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1" @click="clickMenu('/custAdd')">客户新增</el-menu-item>
          <el-menu-item index="1-2" @click="clickMenu('/custUpdate')">客户修改</el-menu-item>
          <el-menu-item index="1-3" @click="clickMenu('/custDelete')">客户删除</el-menu-item>
          <el-menu-item index="1-4" @click="clickMenu('/custSelect')">客户查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title" @click="clickMenu('/buss')">业务管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1" @click="clickMenu('/bussAdd')">业务录入</el-menu-item>
          <el-menu-item index="2-2" @click="clickMenu('/bussUpdate')">业务修改</el-menu-item>
          <el-menu-item index="2-3" @click="clickMenu('/bussDelete')">业务删除</el-menu-item>
          <el-menu-item index="2-4" @click="clickMenu('/bussSelect')">业务查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title" @click="clickMenu('/order')">工单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="3-1" @click="clickMenu('/orderDispatch')">派单</el-menu-item>
          <el-menu-item index="3-2" @click="clickMenu('/orderReceive')">收单</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="4"  @click="clickMenu('/inve')">
        <i class="el-icon-menu"></i>
        <span slot="title">库存管理</span>
      </el-menu-item>
      <el-menu-item index="5" @click="clickMenu('/people')">
        <i class="el-icon-menu"></i>
        <span slot="title">人员管理</span>
      </el-menu-item>
      <el-menu-item index="6" @click="clickMenu('/material')">
        <i class="el-icon-menu"></i>
        <span slot="title">物资管理</span>
      </el-menu-item>
      <el-menu-item index="7" @click="clickMenu('/area')">
        <i class="el-icon-menu"></i>
        <span slot="title">系统设置-地区管理</span>
      </el-menu-item>
      <!-- <el-submenu index="8">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置-业务管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">客户新增</el-menu-item>
          <el-menu-item index="1-2">客户修改</el-menu-item>
          <el-menu-item index="1-2">客户删除</el-menu-item>
          <el-menu-item index="1-2">客户查询</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
    </el-menu>
  </div>
</template>
<style>
.el-menu {
  height: 100vh;
  max-height: 100vh;
}

.el-menu h3 {
  color: white;
  text-align: center;
  line-height: 48px;
  font-size: 24px;
  font-weight: 400;
}
</style>

<script>
export default {
  name: 'Aside',
  data() {
    return {
      //isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }, clickMenu(item) {
      if (item != this.$route.path) {
        this.$router.push(item);
      }

    }
  }, computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  }
}
</script>